<!doctype html>
<html class="no-js">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>modeler-list</title>
	<meta name="description" content="">
	<meta name="viewport"
		content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
	<script src="../editor-app/app-cfg.js"></script>
	<link rel="stylesheet" href="../editor-app/libs/bootstrap_3.1.1/css/bootstrap.min.css" />
	<script src="../editor-app/libs/jquery_1.11.0/jquery.min.js"></script>
	<script src="../editor-app/libs/angular_1.2.13/angular.min.js"></script>
	<script src="../editor-app/libs/bootstrap_3.1.1/js/bootstrap.min.js"></script>
	<style type="text/css">
		td,
		th {
			text-align: center;
			vertical-align: middle !important;
		}

		body {
			padding: 15px;
		}

		.header {
			text-align: right;
			margin-bottom: 10px;
			margin-top: 15px;
		}

		.header>.col-md-1 {
			text-align: right;
		}
	</style>
</head>
</head>

<body ng-app="ProcessListApp" ng-controller="ProcessListCtrl">

	<ul class="nav nav-tabs">
		<li role="presentation" ng-click="changePage(page)" ng-repeat=" page in pages"
			ng-class="{true:'active',false:''}[selectPage==page]">
			<a href="#">{{page.name}}</a>
		</li>
	</ul>
	<div class="col-md-12" ng-show="selectPage.code==1">
		<div class="row header">
			<div class="col-md-1">
				<label> key：</label>
			</div>
			<div class="col-md-2">
				<select class="form-control" ng-model="param.key">
					<option ng-repeat="keyItem in keys" value="{{keyItem.code}}">{{keyItem.name}}</option>
				</select>
			</div>
			<div class="col-md-1">
				<label> 分类：</label>
			</div>
			<div class="col-md-2">
				<select class="form-control" ng-model="param.category">
					<option ng-repeat="categoryItem in categorys" value="{{categoryItem.code}}">
						{{categoryItem.name}}
					</option>
				</select>
			</div>

			<div class="col-md-1">
				<label> 发起人：</label>
			</div>
			<div class="col-md-2">
				<input ng-model="param.startedBy" class="form-control" />
			</div>
			<div class="col-md-2">
				<button type="button" class="btn btn-primary" ng-click="querySentList()">
					查&nbsp;&nbsp;询
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</div>
		</div>

		<table class="table table-bordered">
			<thead>
				<tr>
					<th width="50px">#</th>
					<th width="100px">id</th>
					<th width="250px">流程实例id</th>
					<th width="150px">流程key</th>
					<th style="text-align: left;">流程部署名称</th>
					<th width="250px">开始时间</th>
					<th width="250px">结束时间</th>
					<th width="250px">持续时间（s）</th>
					<th width="150px">发起人id</th>
					<th width="300px">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat=" dataItem in sentList ">
					<td ng-bind="$index+1">1</td>
					<td>{{dataItem.id}}</td>
					<td>{{dataItem.processInstanceId}}</td>
					<td>
					{{dataItem.processDefinitionKey}}
						<span ng-if="dataItem.processDefinitionKey=='public'" title="{{dataItem.processDefinitionKey}}">
							通用
						</span>
						<span ng-if="dataItem.processDefinitionKey=='BX_RC'" title="{{dataItem.processDefinitionKey}}">
							日常报销
						</span>
						<span ng-if="dataItem.processDefinitionKey=='BX_CL'" title="{{dataItem.processDefinitionKey}}">
							差旅报销
						</span>
						<span ng-if="dataItem.processDefinitionKey=='QJ_RC'" title="{{dataItem.processDefinitionKey}}">
							日常请假
						</span>
					</td>
					<td style="text-align: left;">{{dataItem.processDefinitionName}}</td>
					<td>
						{{dataItem.startTime}}
					</td>
					<td>
						{{dataItem.endTime}}
					</td>
					<td>
						{{dataItem.durationInMillis}}
					</td>
					<td>{{dataItem.startUserId}}</td>
					<td>
						<button type="button" class="btn btn-success"
							ng-click="viewProgressPathImage(dataItem.processInstanceId)">查看流程图</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="col-md-12" ng-show="selectPage.code==2">
		<div class="row header">
			<div class="col-md-1">
				<label> key：</label>
			</div>
			<div class="col-md-2">
				<select class="form-control" ng-model="todoParam.key">
					<option ng-repeat="keyItem in keys" value="{{keyItem.code}}">{{keyItem.name}}</option>
				</select>
			</div>
			<div class="col-md-1">
				<label> 分类：</label>
			</div>
			<div class="col-md-2">
				<select class="form-control" ng-model="todoParam.category">
					<option ng-repeat="categoryItem in categorys" value="{{categoryItem.code}}">
						{{categoryItem.name}}
					</option>
				</select>
			</div>

			<div class="col-md-1">
				<label> 待办人：</label>
			</div>
			<div class="col-md-2">
				<input ng-model="todoParam.todoPerson" placeholder="待办人员编码" class="form-control" />
			</div>
			<div class="col-md-2">
				<button type="button" class="btn btn-primary" ng-click="geteTodoTaskList()">
					查&nbsp;&nbsp;询
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</div>
		</div>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th width="50px">#</th>
					<th width="100px">任务id</th>
					<th width="250px">任务名称</th>
					<th width="250px">任务创建时间</th>
					<th width="200px">待办人id</th>
					<th style="text-align: left;">流程名称</th>
					<th width="250px">流程实例id</th>
					<th width="300px">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat=" dataItem in todoTaskList ">
					<td ng-bind="$index+1">1</td>
					<td>{{dataItem.id}}</td>
					<td>{{dataItem.name}}</td>
					<td>{{dataItem.createTime}}</td>
					<td>{{dataItem.assignee}}</td>
					<td>{{dataItem.processInstanceName}}</td>
					<td>{{dataItem.processInstanceId}}</td>
					<td>
						&nbsp;&nbsp;&nbsp;
						<button type="button" class="btn btn-primary"
							ng-click="viewProgressPathImage(dataItem.processInstanceId)">查看流程图</button>
						<button type="button" class="btn btn-success" ng-click="completeForm(dataItem)">完成任务</button>
					</td>
				</tr>
			</tbody>
		</table>

		<!-- Modal -->
		<div class="modal fade" id="completeTaskModal" tabindex="-1" role="dialog"
			aria-labelledby="myCompleteTaskModal">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myCompleteTaskModal">完成任务:{{completeTask.name}}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-2 control-label">批示内容</label>
								<div class="col-sm-10">
									<textarea class="form-control" ng-model="completeTaskFrom.comment"
										placeholder="批示内容"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">流程参数(json格式)</label>
								<div class="col-sm-10">
									<textarea rows="10" cols="30" class="form-control"
										ng-model="completeTaskFrom.variables" placeholder="流程参数，json格式"></textarea>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" ng-click="complete()" class="btn btn-primary">提交</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-12" ng-show="selectPage.code==3">
		<div class="row header">
			<div class="col-md-1">
				<label> key：</label>
			</div>
			<div class="col-md-1">
				<select class="form-control" ng-model="claimParam.key">
					<option ng-repeat="keyItem in keys" value="{{keyItem.code}}">{{keyItem.name}}</option>
				</select>
			</div>
			<div class="col-md-1">
				<label> 分类：</label>
			</div>
			<div class="col-md-1">
				<select class="form-control" ng-model="claimParam.category">
					<option ng-repeat="categoryItem in categorys" value="{{categoryItem.code}}">
						{{categoryItem.name}}
					</option>
				</select>
			</div>

			<div class="col-md-1">
				<label> 待签组：</label>
			</div>
			<div class="col-md-1">
				<select class="form-control" ng-model="claimParam.group">
					<option value="GROUP_ONE">一组</option>
					<option value="GROUP_TWO">二组</option>
				</select>
			</div>
			<div class="col-md-1">
				<label> 待签人：</label>
			</div>
			<div class="col-md-1">
				<input ng-model="claimParam.assigned" class="form-control" />
			</div>
			<div class="col-md-1">
				<button type="button" class="btn btn-primary" ng-click="getClaimList()">
					查&nbsp;&nbsp;询
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</div>
		</div>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th width="50px">#</th>
					<th width="100px">任务id</th>
					<th width="250px">任务名称</th>
					<th width="250px">任务创建时间</th>
					<th width="250px">流程实例id</th>
					<th width="300px">操作</th>
				</tr>

			</thead>
			<tbody>
				<tr ng-repeat=" dataItem in claimList ">
					<td ng-bind="$index+1">1</td>
					<td>{{dataItem.id}}</td>
					<td>{{dataItem.name}}</td>
					<td>{{dataItem.createTime}}</td>
					<td>{{dataItem.processInstanceId}}</td>
					<td>
						<button type="button" class="btn btn-primary"
							ng-click="viewProgressPathImage(dataItem.processInstanceId)">查看流程图</button>
						<button type="button" class="btn btn-success" ng-click="claimMode(dataItem)">签收任务</button>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- Modal -->
		<div class="modal fade" id="claimTaskModal" tabindex="-1" role="dialog" aria-labelledby="myClaimTaskModal">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="claimTaskModal">签收任务:{{claimTask.name}}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-2 control-label">签收人id</label>
								<div class="col-sm-10">
									<input class="form-control" ng-model="claimAssignee" placeholder="签收人id"></input>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" ng-click="claimSubmit()" class="btn btn-primary">提交</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-12" ng-show="selectPage.code==4">
		<div class="row header">
			<div class="col-md-1">
				<label> key：</label>
			</div>
			<div class="col-md-1">
				<select class="form-control" ng-model="finishParam.key">
					<option ng-repeat="keyItem in keys" value="{{keyItem.code}}">{{keyItem.name}}</option>
				</select>
			</div>
			<div class="col-md-1">
				<label> 分类：</label>
			</div>
			<div class="col-md-1">
				<select class="form-control" ng-model="finishParam.category">
					<option ng-repeat="categoryItem in categorys" value="{{categoryItem.code}}">
						{{categoryItem.name}}
					</option>
				</select>
			</div>
			<div class="col-md-1">
				<label> 参与办理人：</label>
			</div>
			<div class="col-md-1">
				<input ng-model="finishParam.assigned" class="form-control" />
			</div>
			<div class="col-md-1">
				<button type="button" class="btn btn-primary" ng-click="getFinishList()">
					查&nbsp;&nbsp;询
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</div>
		</div>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th width="50px">#</th>
					<th width="100px">id</th>
					<th width="250px">流程实例id</th>
					<th width="150px">流程key</th>
					<th style="text-align: left;">流程部署名称</th>
					<th width="250px">开始时间</th>
					<th width="250px">结束时间</th>
					<th width="250px">持续时间（s）</th>
					<th width="150px">发起人id</th>
					<th width="300px">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat=" dataItem in finishList ">
					<td ng-bind="$index+1">1</td>
					<td>{{dataItem.id}}</td>
					<td>{{dataItem.processInstanceId}}</td>
					<td>
						<span ng-if="dataItem.processDefinitionKey=='public'" title="{{dataItem.processDefinitionKey}}">
							通用
						</span>
						<span ng-if="dataItem.processDefinitionKey=='BX_RC'" title="{{dataItem.processDefinitionKey}}">
							日常报销
						</span>
						<span ng-if="dataItem.processDefinitionKey=='BX_CL'" title="{{dataItem.processDefinitionKey}}">
							差旅报销
						</span>
						<span ng-if="dataItem.processDefinitionKey=='QJ_RC'" title="{{dataItem.processDefinitionKey}}">
							日常请假
						</span>
					</td>
					<td style="text-align: left;">{{dataItem.processDefinitionName}}</td>
					<td>
						{{dataItem.startTime}}
					</td>
					<td>
						{{dataItem.endTime}}
					</td>
					<td>
						{{dataItem.durationInMillis}}
					</td>
					<td>{{dataItem.startUserId}}</td>
					<td>
						<button type="button" class="btn btn-success"
							ng-click="viewProgressPathImage(dataItem.processInstanceId)">查看流程图</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		var app = angular.module('ProcessListApp', []);
		app.controller('ProcessListCtrl', function ($scope, $http) {
			$scope.pages = [
				{name: '流程查询process', code: '1'},
				{name: '待办任务查询', code: '2'},
				{name: '代签任务查询', code: '3'},
				{name: '已办流程查询', code: '4'},
			];
			$scope.selectPage = $scope.pages[0];
			$scope.changePage = function (page) {
				$scope.selectPage = page;
			}

			$scope.keys = [
				{code: "", name: "查询所有"},
				{code: "public", name: "通用"},
				{code: "BX_RC", name: "日常报销"},
				{code: "BX_CL", name: "差旅报销"},
				{code: "QJ_RC", name: "日常请假"}
			];
			$scope.categorys = [
				{code: "", name: "查询所有"},
				{code: "public", name: "通用"},
				{code: "FL_ONE", name: "分类一"},
				{code: "FL_TWO", name: "分类二"}
			];

			$scope.param = {
				"key": '',
				"category": '',
				"startedBy": ''
			}

			//---------------------------------已发流程--------------------------------------------------------
			$scope.sentList = [];
			//请求数据
			$scope.querySentList = function () {
				$scope.sentList = [];
				var url = "/task/sentList?page=1&pageSize=15000000";
				if ($scope.param.key) {
					url += "&key=" + $scope.param.key;
				}
				if ($scope.param.category) {
					url += "&category=" + $scope.param.category;
				}
				if ($scope.param.startedBy) {
					url += "&startedBy=" + $scope.param.startedBy;
				}
				$http({
					method: 'GET',
					url: url
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$scope.sentList = response.data.data;
						console.log($scope.sentList);
					} else {
						alert("查询失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}
			$scope.querySentList();

			//------------------------------待办任务-----------------------------------------------------------
			//待办任务查询条件
			$scope.todoParam = {
				"key": '',
				"category": '',
				"todoPerson": ''
			}
			//完成任务
			$scope.completeTask;
			//完成任务提交表单内容
			$scope.completeTaskFrom;

			//待办任务查询
			$scope.todoTaskList = [];
			$scope.geteTodoTaskList = function () {
				var url = "/task/todoList?page=1&pageSize=15000000";
				if ($scope.todoParam.key) {
					url += "&key=" + $scope.todoParam.key;
				}
				if ($scope.todoParam.category) {
					url += "&category=" + $scope.todoParam.category;
				}
				if ($scope.todoParam.todoPerson) {
					url += "&assignee=" + $scope.todoParam.todoPerson;
				}

				$http({
					method: 'GET',
					url: url
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$scope.todoTaskList = response.data.data;
						console.log($scope.todoTaskList);
					} else {
						alert("查询失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}
			$scope.geteTodoTaskList();

			$scope.completeForm = function (task) {
				if (!task.assignee) {
					alert(task.name + "-任务没有指定具体对象，请先切换到代签任务查询中先签收该任务！");
					return;
				}
				$scope.completeTask = task;
				$scope.completeTaskFrom = {};
				$('#completeTaskModal').modal('show');
			}
			//完成任务
			$scope.complete = function () {
				var url = "/task/complete?taskId=" + $scope.completeTask.id;
				if ($scope.completeTaskFrom.comment) {
					url += "&comment=" + $scope.completeTaskFrom.comment;
				}
				var variables = {};
				if ($scope.completeTaskFrom.variables) {
					variables = JSON.parse($scope.completeTaskFrom.variables);
				}
				$http({
					method: 'POST',
					url: url,
					data: variables
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$('#completeTaskModal').modal('hide');
						$scope.geteTodoTaskList();
						alert('任务完成成功');
					} else {
						alert("任务完成失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}

			//---------------------代签任务------------------------------------------------------
			//代签任务列表
			$scope.claimList = [];
			//查询代签任务过滤条件参数
			$scope.claimParam = {};
			$scope.getClaimList = function () {
				var url = "/task/claimList?page=1&pageSize=15000000";
				if ($scope.claimParam.key) {
					url += "&key=" + $scope.claimParam.key;
				}
				if ($scope.claimParam.category) {
					url += "&category=" + $scope.claimParam.category;
				}
				if ($scope.claimParam.group) {
					url += "&group=" + $scope.claimParam.group;
				}
				if ($scope.claimParam.assigned) {
					url += "&assigned=" + $scope.claimParam.assigned;
				}
				$http({
					method: 'GET',
					url: url
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$scope.claimList = response.data.data;
						console.log($scope.claimList);
					} else {
						alert("查询失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}
			$scope.getClaimList();

			$scope.claimAssignee = "";
			$scope.claimTask;
			//弹出签收任务模态框
			$scope.claimMode = function (task) {
				$scope.claimTask = task;
				$('#claimTaskModal').modal('show');
			}

			//提交签收请求
			$scope.claimSubmit = function () {
				if (!$scope.claimAssignee) {
					alert("签收人不能为空，请先填写签收人！");
					return;
				}
				var url = "/task/claim?taskId=" + $scope.claimTask.id + "&assignee=" + $scope.claimAssignee;
				$http({
					method: 'GET',
					url: url
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$scope.getClaimList();
						$('#claimTaskModal').modal('hide');
						alert("任务签收成功！");
					} else {
						alert("任务签收失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}
			//-----------------------已办结任务查询------------------------------------------
			$scope.finishList = [];
			$scope.finishParam = {};
			$scope.getFinishList = function () {
				var url = "/task/finishList?page=1&pageSize=15000000";
				if ($scope.claimParam.key) {
					url += "&key=" + $scope.claimParam.key;
				}
				if ($scope.finishParam.category) {
					url += "&category=" + $scope.finishParam.category;
				}
				if ($scope.finishParam.assigned) {
					url += "&assigned=" + $scope.finishParam.assigned;
				}
				$http({
					method: 'GET',
					url: url
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$scope.finishList = response.data.data;
						console.log($scope.finishList);
					} else {
						alert("查询失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}
			$scope.getFinishList();
			//查询流程图
			$scope.viewProgressPathImage = function (processInstanceId) {
				window.open("/define/view-progress-pathImage.html?processInstanceId=" + processInstanceId);
			}
		});
	</script>
</body>

</html>